<template>
  <div class="main">
    <div class="big">
      <!-- 导航栏详情 start -->
      <div class="w" v-if="logn === 'A'">
        <div class="up">
          <div class="r1">{{ name }}</div>
          <div class="l1"></div>
        </div>
        <div class="middle">
          <span>{{ informDetail.informName }}</span>
          <p>
            发布日期：{{ informDetail.informDate }} &nbsp;&nbsp;点击数：{{
              informDetail.visitNumber
            }}
          </p>
          <template v-if="loadingFinish">
            <!--文章内容-->
            <div v-html="inform"></div>
          </template>
        </div>
        <div class="bottom"></div>
      </div>

      <!-- 其他详情 start -->
      <div class="w" v-else>
        <div class="up">
          <div class="r1">{{ informDetail.title }}</div>
          <div class="l1"></div>
        </div>
        <div class="middle" v-if="loadingFinish">
          <span>{{ informDetail.informName }}</span>
          <p>
            发布日期：{{ informDetail.informDate }} &nbsp;&nbsp; 点击数：{{informDetail.visitNumber }}
          </p>
          <div v-html="inform"></div>
        </div>
      </div>

      <!--下载附件-->
      <div v-if="ifShowDownload">
        <div class="file-title">附件下载：</div>
        <div class="filesList">
          <div
            class="file"
            v-for="item in informDetail.filesList"
            :key="item.fileId"
          >
            <a
              v-if="item.fileUrl"
              @click="downloadFile(item.fileUrl, item.fileName)"
            >
              {{ item.fileName }}
            </a>
          </div>
        </div>
      </div>

      <!--资料来源-->
      <div class="material" v-if="informDetail.source">
        <span>资料来源：</span>
        <span>{{ informDetail.source }}</span>
      </div>
    </div>
    <appBottom class="w-bottom"></appBottom>
  </div>
</template>
<script>
import {
  homeshow2,
  homeshow,
  showSearchResult,
  searchDetail,
  getDayViews,
} from "@/api/compoents";
import appBottom from "../../components/bottom.vue";
export default {
  name: "appPage",
  components: {
    appBottom,
  },
  data() {
    return {
      // baseUrl: "http://39.103.190.34:8181",
      baseUrl: "http://59.110.106.225:8181",
      id: -1,
      name: "",
      names: "",
      loadingFinish: false,
      informDetail: {}, // 新闻详情
      ifShowDownload: false,
      logn: -1,
      messList: {},
      count:0,
    };
  },
  computed:{
    inform() {
      const tempDiv = document.createElement('div');
      tempDiv.innerHTML = this.informDetail.inform;
      // 遍历所有的子元素
      const isSmallScreen = window.innerWidth <= 800;
      console.log('isSmallScreen',isSmallScreen)
      const elements = tempDiv.getElementsByTagName('*');
      for (let i = 0; i < elements.length; i++) {
        const element = elements[i];
        const fontSize = parseInt(element.style.fontSize, 10);



        // 如果字体大小小于22px，则设置新的样式
        if (!fontSize || (!isNaN(fontSize) && fontSize < 20)) {
          if(isSmallScreen) {
            element.style.fontSize = '14px';
          } else {
            element.style.fontSize = '20px';
          }
        }

        if(element.tagName==='FONT') {
          if(isSmallScreen) {
            element.size='3'
          } else {
            element.size='4'
          }
        }

        // 解决表格超出屏幕问题
        if(element.tagName==='TABLE') {
          element.style.width='100%'
          element.style.tableLayout='auto'
        }
        if(element.tagName==='TD') {
          element.style.wordWrap ='break-word'
          element.style.wordBreak ='break-all'
          element.style.whiteSpace = 'normal';
          // 解决表格中图片超出屏幕问题
          const imgs = element.getElementsByTagName('img');
          for (let i = 0; i < imgs.length; i++) {
            const img = imgs[i];
            img.style.maxWidth = '100%'
            img.style.height='auto'
          }
        }

        // 手机端图片自适应
        if(element.tagName==='IMG') {
          element.style.maxWidth='100%'
          element.style.height='auto'
        }

        /* if (['P', 'SPAN', 'DIV','SECTION'].includes(element.tagName)) {
       if(!element.style.fontSize) {
         if(isSmallScreen) {
           element.style.fontSize='14px'
         } else {
           element.style.fontSize='20px'
           element.style.lineHeight='1.7'
         }
       }
     }*/

        /* if(element.className==='TRS_Editor') {
           const divEle = element.getElementsByTagName('div');
           // 遍历这些 <p> 元素
           for (let j = 0; j < divEle.length; j++) {
             const dd = divEle[j];
             if(isSmallScreen) {
               dd.style.fontSize = '14px';
             } else {
               dd.style.fontSize='20px'
               dd.style.lineHeight='1.7'
             }


           }

           const paragraphs = element.getElementsByTagName('p');
           // 遍历这些 <p> 元素
           for (let j = 0; j < paragraphs.length; j++) {
             const paragraph = paragraphs[j];
             if(isSmallScreen) {
               paragraph.style.fontSize = '14px';
             } else {
               paragraph.style.fontSize='20px'
               paragraph.style.lineHeight='1.7'
             }

           }

         }*/

        /* if(isSmallScreen && element.tagName==='SPAN') {
          element.style.lineHeight=element.style.lineHeight/2
        }
        if(isSmallScreen && element.tagName==='TABLE') {
          element.style.width=window.innerWidth*0.85+'px'
          element.style.fontSize='14px'
          console.log('table',element.style.width)
        }*/



      }

      // 返回修改后的HTML
      return tempDiv.innerHTML;
    }

  },
  async mounted() {
    this.keywords = this.$route.query.keywords;
    this.id = this.$route.query.id;
    this.name = this.$route.query.name; // route是当前页面获取路由跳转时传的参数，而router是路由跳转
    this.names = this.$route.query.names;
    this.logn = this.$route.query.logn;
    if(this. logn ==='B'){
      await this.gethomeshow2();
    }
    if(this.logn === 'A'){
      await this.gethomeshow();
    }

  },
  methods: {


// 下载附件
    async downloadFile(url, fileName) {
      const response = await fetch(this.baseUrl + url);
      const blob = await response.blob();
      const link = document.createElement("a");
      link.href = URL.createObjectURL(blob);
      link.download = fileName;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(link.href);
    },

    async gethomeshow2() {
      this.loadingFinish = false;
      const { data: res } = await searchDetail(this.id);
      console.log("接口res22", res);
      if (res.code === 200) {
        this.informDetail = res.portalInform;
        if (
          this.informDetail.filesList &&
          this.informDetail.filesList.some((file) => file.fileUrl !== null)
        ) {
          this.ifShowDownload = true;
        } else {
          this.ifShowDownload = false;
        }
      }
      setTimeout(() => {
        this.loadingFinish = true;
      }, 200);
    },

    async gethomeshow() {

      this.loadingFinish = false;
      const { data: res1 } = await homeshow(this.id);
      console.log('接口res',res1);

      if (res1.code === 200) {
        this.informDetail = res1.allInformList[0];
        // this.inform=this.informDetail.inform
        // console.log('新闻详情111',this.informDetail);

        if (
          this.informDetail.filesList &&
          this.informDetail.filesList.some((file) => file.fileUrl !== null)
        ) {
          this.ifShowDownload = true;
        } else {
          this.ifShowDownload = false;
        }
      }
      setTimeout(() => {
        this.loadingFinish = true;
      }, 200);
    },
  },
};
</script>
<style scoped lang="less">
@media screen and (max-width: 800px) {
  .w {
    width: 92vw!important;
    margin-top: calc(var(--w) * 0.2) !important;
  }
  .middle {
    p {
      font-size: 10px!important;
    }
  }
  .material {
    font-size: 10px!important;
    color: #737373;
  }

}



.main {
  z-index: 33;
  animation: show 0.5s;
  min-height: calc(100vh - var(--xd--fontsize) * 4);
  position: relative;
}

.w {
  --w: calc(var(--xd--fontsize) * 5);
  width: 85vw;
  margin: calc(var(--w) * .5) auto 0;
  border-radius: calc(var(--w) * 0.1);
  min-height: calc(var(--w) * 3.8);
}
.up {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  border-bottom: calc(var(--w) * 0.01) solid rgb(194, 193, 193);
  padding: 0 calc(var(--w) * 0.2);
  font-size: calc(var(--w) * 0.18);
}
.r1 {
  padding: calc(var(--w) * 0.1) calc(var(--w) * 0.08);
  padding-bottom: calc(var(--w) * 0.05);
  font-weight: 700;
  border-bottom: 4px solid #3e6db5;
  font-size: calc(var(--w) * 0.15);
}

.middle {
  padding: calc(var(--xd--fontsize) * 1) 0;
  & > span {
    display: block;
    text-align: center;
    font-size: calc(var(--w) * 0.18);
    font-weight: 800;
  }
  & > p {
    text-align:center;
    color: #8c8b8b;
    padding: calc(var(--w) * 0.1) 0;
    font-size: 16px;
  }
  & > div {
    margin-top: 30px;
    p {

    }
  }
}
.title {
  width: 300px;
  height: 100px;
  background-color: #75ee75;
}
.w-bottom {
  margin-top: calc(var(--w) * 1.3);
  padding: calc(var(--w) * 0.05) 0;
}
& > iframe {
  width: 60vw;
}

.file-title {
  font-size: 14px;
  width: 88vw;
  text-align: left;
  margin: 0 auto;
}
.filesList {
  font-size: 14px;
  width: 87vw;
  margin: 0 auto;
  .file {
    text-align: left;
    margin: 12px;
    cursor: pointer;
    //border:1px solid #ccc
  }
  .file:hover {
    color: #2176b0;
  }
}

.material {
  width: 94vw;
  text-align: right;
  font-size: 16px;
}

::v-deep table {
  border-top: 1px solid #999 !important;
  border-left: 1px solid #999 !important;
  border-spacing: 0; /*去掉单元格间隙*/
}
::v-deep table td {
  border-bottom: 1px solid #999 !important;
  border-right: 1px solid #999 !important;
}

::v-deep b {
  font-weight: 700;
}
::v-deep strong {
  font-weight: 700;
  line-height: 0px;
}
::v-deep section {
  display: inline-block;
}
.visits{
  position: relative;
  margin: 0 auto;
  width: 92vw;
  height: 40px;
  line-height: 40px;
  .dayVisits{
    position: absolute;
    left: 25px;
    font-size: 16px;
  }
}
strong p{
  /* height: 20px; */
}
</style>
